<template>
  <a-modal v-model:open="open" :title="'字典配置:'+dict.name"
           cancel-text="取消"
           @cancel="close"
           :footer="false"
           width="60%"
  >
    <div>

      <a-form
          ref="formRef"
          :model="fromModel"
          :rules="rules"
          style="width: 100%;"
      >
        <div class="flex alignCenter">
          <a-space>
            <a-form-item label="字典名称" name="label">
              <a-input v-model:value="fromModel.label"
                       placeholder="请输入字典名称"
                       allow-clear/>
            </a-form-item>
            <a-form-item label="值" name="value">
              <a-input v-model:value="fromModel.value"
                       placeholder="请输入值"
                       allow-clear/>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" :loading="confirmLoading" @click="addItem">
                新增
              </a-button>
            </a-form-item>
          </a-space>

        </div>
      </a-form>
      <a-table :columns="columns"
               :data-source="dataList"
               :pagination="pagination"
               rowKey="id"
               style="width: 100%"
               @change="pageChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex!=='operation'">
            <span>{{record[column.dataIndex]}}</span>
          </template>
          <template v-if="column.dataIndex==='operation'">
            <div style="display: flex;width: 100%;justify-content: center;align-items: center">
              <div>
                <a-button type="link" size="small" @click="openModel(record)">编辑</a-button>
              </div>
              <div>
                <a-popconfirm
                    title="确定删除吗"
                    @confirm="remove(record.id)"
                    ok-text="确定"
                    cancel-text="取消"
                >
                  <a-button danger type="link" size="small">删除</a-button>
                </a-popconfirm>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <add-or-update v-model="show" :row="dictItem" @success="success"/>
  </a-modal>
</template>
<script setup lang="ts">
import {ref, defineProps, defineEmits, watch, onMounted} from 'vue'
import {queryList,add,del} from '@/api/sys-setting/dict-item.ts'
import AddOrUpdate from "./item-add-or-update.vue";
import {message, Modal} from "ant-design-vue";
import {PaginationConfig} from "ant-design-vue/es/pagination";
import {PaginationProps} from "ant-design-vue/lib";

const props = defineProps(['row','modelValue']);

const emits = defineEmits(['update:modelValue','success']);
const dict = ref({})
const generateFromModel = ()=>{
  return{
    dictId: '',
    value: '',
    label: '',
    code: '',
  }
}

const fromModel = ref(generateFromModel());
const dictItem = ref(null);
const open = ref(false)
const confirmLoading = ref(false);
const formRef = ref();
const show = ref(false);
const rules = {
  label: [
    { required: true, message: '字典名称不能为空', trigger: 'blur' }
  ],
  value: [
    { required: true, message: '值不能为空', trigger: 'blur' }
  ],
}
const dataList = ref([])
const columns = [
  {
    title: '字典名称',
    dataIndex: 'label',
    key: 'label',
    align:'center'
  },
  {
    title: '值',
    dataIndex: 'value',
    key: 'value',
    align:'center'
  },
  {
    title: '字典编码',
    dataIndex: 'code',
    key: 'code',
    align:'center'
  },
  {
    title: '排序',
    dataIndex: 'sortOrder',
    key: 'sortOrder',
    align:'center'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align:'center'
  },
  {
    title: '操作',
    dataIndex:'operation',
    key: 'operation',
    align:'center'
  }
];
const generateQueryFrom = ()=>{
  return{
    code:'',
    pageNo:1,
    pageSize:10
  }
}
const generatePagination = ():PaginationProps=>{
  return{
    current:1,
    pageSize:10,
    total:0,
    showSizeChanger:true
  }
}
const queryFrom = ref(generateQueryFrom());
const pagination = ref(generatePagination())
const close = ()=>{
  fromModel.value = generateFromModel();
  confirmLoading.value = false;
  emits('update:modelValue',false)
}
const getList = ()=>{
  queryList(queryFrom.value).then((res:any)=>{
    dataList.value = res.result.records;
    pagination.value.total = res.result.total;
  })
}
const pageChange = ({current,pageSize})=>{
  console.log(pagination)
  pagination.value.current = current;
  pagination.value.pageSize = pageSize;
  queryFrom.value.pageNo = current;
  queryFrom.value.pageSize = pageSize;
  getList();
}
const addItem = ()=>{
  formRef.value
      .validate()
      .then(async () => {
        confirmLoading.value = true;
          await add(fromModel.value)
        confirmLoading.value = false;
          message.success("添加成功!")
        fromModel.value.label = '';
        fromModel.value.value = '';
        getList();
      })
      .catch(error => {
        confirmLoading.value = false;
        console.log('error', error);
      })
}
const remove =(id:number)=>{
  del(id).then(()=>{
    message.success("删除成功!")
    getList();
  })
}
const openModel = (row:any)=>{
  dictItem.value = {...row};
  show.value = true;
}
const success = ()=>{
  message.success("操作成功!")
  queryFrom.value.pageNo = 1;
  getList();
}
watch(()=>props.row,(value)=>{
  if(value){
    dict.value = value;
    fromModel.value.dictId = value.id;
    fromModel.value.code = value.code;
    queryFrom.value.code = value.code;
    getList();
  }
}, {
  immediate:true,
  deep:true
})
watch(()=>props.modelValue,(value)=>{
  open.value = value;
},{
  immediate:true
})
onMounted(()=>{

})
</script>
<style scoped lang="scss">

</style>
